<template>
	<view>
		<view class="head-box">
			<view class="navbar"></view>
			<view class="container">
				<view class="left">
					<view class="logo">
						<image src="../../static/img/logo96x96.png" mode="aspectFit"></image>
					</view>
				</view>
				<view class="right" :style="'padding-right: ' + MPPR + 'px'">
					<view class="address-box" @tap="chooseLocation">
						<i class="hxicon-locationfill"></i>
						<text>{{addressname}}</text>
						<i class="hxicon-right"></i>
					</view> 
					<!-- <view class="notice">
						<i class="hxicon-notice"></i>
					</view> -->
				</view>
				
			</view>
		</view>
		<view class="search-box" :class="{'QZBG':GDHEAD}" :style="GDHEAD ? 'padding-right: ' + MPPR + 'px' : ''">
			<!-- <view class="navbar" ></view> -->
			<view class="ctn">
				<view class="hx-search-box" @click="goSearch">
				    <uni-icons type="search" size="22" color="#666666" />
				    <text>输入搜索关键词</text>
				</view>
			</view>
		</view>
		
		<mescroll-body ref="mescrollRef"  @init="mescrollInit"  @down="downCallback" :up="upOption" @up="upCallback">

		<view class="container menu-box" >
			<view class="item-box" v-for="(item,i) in menuList" :key="i" @tap="gotofication(item.id,item.title)">
				<image :src="item.img_url" mode=""></image>
				<view class="tit">
					<text>{{item.title}}</text>
				</view>
			</view>
		</view>
	
		<view class=" bannerimg-box">
			<swiper  circular duration="400" interval="10000" autoplay >
				<swiper-item class="swiper-item bannerImg" v-for="(item,index) in bannerData" :key="index">
					<!-- 图片尺寸为 750*250 -->
					<image :src="item.src" class="loaded" mode="widthFix"></image>
				</swiper-item>
			</swiper>
		</view>
		
		<view class="container margin-top sort-box">
			<view class="item-box" v-for="(item,i) in sortList" :key="i" @tap="tosortList(i)">
				<view class="tit" :class="{'active': sortIndex == i}">
					<text>{{item.tit}}</text>
				</view>
			</view>
		</view>
		<view class=" store-box" v-if="storeList">
			<view class=" item-box" v-for="(store,i) in storeList" :key="i">
				<view class="container top-box">
					<view class="left" @click="toStore(store.id)">
						<image :src="store.img_url" mode="aspectFill"></image>
					</view>
					<view class="right" @click="toStore(store.id)">
						
						<text class="tit" >{{store.md_name}}</text>
						<view class="row justify-content">
							<view class="row-left">
								<i class="hxicon-favorfill "></i>
								<text class="t1">{{store.md_pingfen}}</text>
								<text class="t2">月售{{store.md_sales}}</text>
							</view>
							<view class="row-right">
								<i class="hxicon-locationfill"></i>
								<text>{{store.dis}}</text>
							</view>
						</view>
						<view class="row">
							<text >起送￥{{store.md_qs_money}}</text>
							<text class="t2" v-if="store.md_ps_money > 0">配送￥{{store.md_ps_money}} </text>
							<text class="t2" v-else>免费配送</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		</mescroll-body>
		<view class="foot" v-if="showFoot">
			<text>更多商家加入中，敬请期待</text>
		</view>
		<view class="footzw"></view>
		
	</view>
	
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	
	const screenHeight = uni.getSystemInfoSync().screenHeight;
	export default {
		mixins: [MescrollMixin], 
		onPageScroll(e){
			let that= this;
			if(e.scrollTop>10){
				let view = uni.createSelectorQuery().select(".search-box");
				view.fields({
					rect: true
				}, res => {
					if(res.top == 0){
						that.GDHEAD = 1;
					}else{
						that.GDHEAD = 0;
					}
					
				}).exec();
			}
			
		},
		data() {
			return {
				MPPR: 0,
				GDHEAD: 0,
				//显示没有更多商户
				showFoot: 0, 
				upOption: {
					// use: false, // 是否启用上拉加载; 默认true
					// page: {
					// 	num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
					// 	size: 10 // 每页数据的数量
					// },
					noMoreSize: 10, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty:{
						tip: '', // 提示
						btnText: ''
					}
				},
				menuList: [],
				sortIndex: 0,
				sortOrderbby:'',
				sortList: [{tit:'综合排序'},{tit:'附近商户'}, {tit:'销量优先'}, {tit:'速度优先'}, {tit:'配送费最低'}],
				storeList: [],
				bannerData:[
					{page: '/pages/product/product?id=457', src: '//imgs.1op.cn/i/hxshop/banner/banner.jpg'},
					{page: '/pages/product/product?id=57', src:'//imgs.1op.cn/i/hxshop/banner/banner.jpg'},
					{page: '/pages/product/product?id=95', src:'//imgs.1op.cn/i/hxshop/banner/banner.jpg'},
					{page: '/pages/product/product?id=45', src:'//imgs.1op.cn/i/hxshop/banner/banner.jpg'}
				],
				addressname:'定位中',
				
			}
		},
		onLoad() {
			let that = this;
			// #ifdef MP
			//小程序下空出胶囊距离
			let m = uni.getMenuButtonBoundingClientRect();
			that.MPPR = m.width + 8
			
			// #endif
			//获取顶部分类
			this.gettoptype();
			//获取定位信息
			this.getLocationList();
			//根据openid获取用户信息
			this.getUserInformation();
		},
		methods: {
			/*下拉刷新的回调 */
			downCallback() {
				this.mescroll.endSuccess();
			},
			upCallback(page) {
				let reqInfo = {};
				reqInfo.loading=1;
				reqInfo.page = page.num;
				reqInfo.pageSize = page.size;
				reqInfo.lng ='117.201137';
				reqInfo.lat ='39.084527';
				reqInfo.action = 'GetIndexInfo';
				reqInfo.orderby =this.sortOrderbby;
				this.$api.Default.getUserInfo(reqInfo,(res)=>{
					     for(let s of res.data.dplist){
							 if(s.img_url.indexOf('http') == -1){
								 s.img_url = this.$config.server+s.img_url;
							 }
							 s.dis = (s.dis/1000).toFixed(2)+'km';
						 }
						this.mescroll.endSuccess(res.data.dplist.length);
						if(page.num == 1) this.storeList = [];
					    this.storeList=this.storeList.concat(res.data.dplist);
				},err=>{
						this.mescroll.endErr();	
				});
			},
			toStore(id){
				uni.navigateTo({
					url: '/pages/store/index?id=' + id
				})
			},
			//搜索
			goSearch(){
				uni.navigateTo({
					url: '/pages/search/search?type=home'
				})
			},
			//商品分类切换
			tosortList(sort){
				this.sortIndex =sort;
				if(sort == 1){
					this.sortOrderbby = 'dis_d';
				}else if(sort == 2){
					this.sortOrderbby = 'sales_d';
				}else if(sort == 3){
					this.sortOrderbby = 'speed_d';
				}else if(sort == 4){
					this.sortOrderbby = 'ps_d';
				}
				this.upCallback({num: 1, size: 10});
			},
			//顶部分类跳转
			gotofication(tit,title){
				uni.navigateTo({
					url: 'classification?type='+tit+'&title='+title
				})
			},
			//获取顶部分类
			gettoptype(){
				 let reqInfo = {};
				 reqInfo.loading=1;
				 reqInfo.action = 'platlist';
				 reqInfo.parent_id = '54';
				 reqInfo.channel_id = '7';
				this.$api.Default.getManagerInfo(reqInfo,(res)=>{
					for(let s of res.data.list){
					   s.img_url = this.$config.server+s.img_url;
					}
					this.menuList =res.data.list;
				});
			},
			//地图选择地址
			chooseLocation(){
				uni.chooseLocation({
					success: (data)=> {
						this.addressname = data.name
					}
				})
			},
			//获取定位信息
			getLocationList(){
			  let that =this;
				uni.getLocation({
				    type: 'wgs84',
				    success: function (res) {
						// this.$store.commit("setPosition", res);
						let data = {};
						data.location = res.longitude+','+res.latitude;
						data.key="debdc460e60d6d22fdd60b90c2bfb365";
						uni.request({
							url: 'https://restapi.amap.com/v3/geocode/regeo',
							method: 'GET',
							data: data,
							success(res) {
								that.addressname =res.data.regeocode.formatted_address;
							}
						})
				    }
				});
			},
		   	//获取基本信息
			getUserInformation(){
				if(this.$tool.localStorage.get('openId')){
					let reqInfo = {};
					reqInfo.loading=1;
					reqInfo.action = 'GetUserInfoByOpenId';
					reqInfo.openid = this.$tool.localStorage.get('openId');
					this.$api.Default.getFsInfo(reqInfo,(res)=>{
						this.$store.setUserInfo("setPosition", res);
					});
					
					
				}
			}
		}
	}
</script>

<style lang="scss">
	
	
page{
	background-color: #f8f8f8;
}
.b-b{
	position: relative;
}
 .b-b:after,
 .b-t:after {
 	position: absolute;
 	z-index: 3;
 	left: 0;
 	right: 0;
 	height: 0;
 	content: '';
 	transform: scaleY(.5);
 	border-bottom: 1px solid #E4E7ED;
 }
 
 .b-b:after {
 	bottom: 0;
 }
 .b-t:after {
 	top: 0;
 }
.container{
	margin: 0 15px;
}
.margin-top{
	margin-top: 12px;
}
.head-box{
	padding: 14px 0;
	/* #ifdef MP */
	padding-top:2px;
	/* #endif */
	background: linear-gradient(100deg, #FFEB3B, #FFC107);
	position: relative;
	z-index: 3;
	.navbar{
		position: sticky;
		top: 0;
		height: var(--status-bar-height);
	}
	
	.container{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		height: 32px;
		align-items: center;
		.left{
			.logo{
				width: 32px;
				height: 32px;
				
				image{
					width: 32px;
					height: 32px;
					border-radius: 50%;
				}
			}
		}
		.right{
			display: flex;
			flex-direction: row;
			color: #333333;
			align-items: center;
			
			.address-box{
				font-size: 14px;
				margin-right: 16px;
				display: flex;
				flex-direction: row;
				align-items: center;
				text{
					margin-left: 2px;
					margin-right: 4px;
				}
				.icon-right{
					position: relative;
					top: 2px;
				}
			}
			
			.notice{
				font-weight: bold;
				font-size: 18px;
			}
		}
		
	}
	
}
.search-box{
	position: sticky;
	top: 0;
	z-index: 2;
	background: linear-gradient(100deg, #FFEB3B, #FFC107);
	padding-top: var(--status-bar-height);
	margin-top: calc(var(--status-bar-height) * -1);
	.ctn{
		border-top-left-radius:50upx;
		border-top-right-radius:50upx;
		background: #f8f8f8;
		padding: 15px 15px 12px;
		
		.hx-search-box{
			border-radius: 40px;
			padding: 0 15px;
			height: 34px;
			display: flex;
			align-items: center;
			line-height: 44rpx;
			background-color: #eeeeee;
			flex:1;
			color: #888888;
			font-size: 14px;
		}
	}	
}
.QZBG{
	background:#ffffff;
	box-shadow: 0 1px 6px #ccc;
	.navbar{
		height: var(--status-bar-height);
	}
	.ctn{
		background:#ffffff;
		/* #ifdef MP */
		padding-top:0px;
		/* #endif */
	}
}
.hot-box{
	
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	.item{
		margin-right: 12px;
		background-color: #EEEEEE;
		color: #666666;
		font-size: 12px;
		border-radius: 20px;
		padding: 2px 6px;
		margin-bottom: 8px;
	}
	.item:last-child{
		margin-right: 0;
	}
}
.bannerimg-box{
	border-bottom-left-radius:10upx;
	border-bottom-right-radius:10upx;
	padding: 24rpx;
	swiper{
		height: 233rpx;
		width: 699rpx;
	}
	.swiper-item {
		
		display: flex;
		justify-content: center;
		align-content: center;
		overflow: hidden;
		
		width: 100%;
		height: 100%;
		image {
			border-radius: 8px;
			width: 100%;
			
		}
	}
	
}

.menu-box{
	
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap:wrap;
	margin-top: 5px;
	border-radius: 8px;
	background: #ffffff;
	padding: 12px 8px;
	.item-box{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 20%;
		image{
			width: 40px;
			height: 40px;
		}
		.tit{
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 12px;
			margin-top: 6px;
			color: #333333;
			padding: 2px 0;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.active{
			color: #ffffff;
			background-color: #999999;
			border-radius: 60px;
		}
	}
}
.sort-box{
	display: flex;
	flex-direction: row;
	margin-top: 12px;
	.item-box{
		
		margin-right: 16px;
		.tit{
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 12px;
			color: #333333;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.active{
			//color: #111111;
			font-weight: bold;
		}
	}
}
.store-box{
	margin-top: 20px;
	
	.item-box{
		display: flex;
		flex-direction: column;
		margin-bottom: 14px;
		padding-bottom: 18px;
		padding-top: 18px;
		background-color: #ffffff;
		.top-box{
			display: flex;
			flex-direction: row;
			.left{
				margin-right: 10px;
				
				
				image{
					width: 72px;
					height: 54px;
					border-radius: 6px;
				}
			}
			.right{
				flex: 1;
				.tit{
					font-size: 16px;
					font-weight: bold;
					color: #333333;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.justify-content{
					display: flex;
					flex-direction: row;
					justify-content: space-between;
				}
				.row{
					font-size: 12px;
					color: #999999;
					margin-top: 4px;
					.row-left{
						display: flex;
						flex-direction: row;
						.t1,i{
							color: #ffca3e;
						}
						
					}
					.t2{
						margin-left: 12px;
					}
					.row-right{
						display: flex;
						flex-direction: row;
						i{
							margin-right: 4px;
						}
					}
					
				}
			}
		}
		.bottom-box{
			&-container{
				margin: 12px 0 0;
				padding-left: 82px;
				
				white-space: nowrap;
				.goods-box{
					width: 80px;
					margin-left: 12px;
					display: inline-block;
					.img-box{
						position: relative;
						width: 80px;
						height: 60px;
						background-color: #f1f1f1;
						border-radius: 4px;
						image{
							width: 100%;
							height: 60px;
						}
						.tag{
							position: absolute;
							bottom: 0;
							left: 0;
							background-color: #FF5722;
							color: #ffffff;
							padding: 2px 4px;
							font-size: 12px;
							border-radius: 4px;
						}
					}
					.tit{
						font-size: 14px;
						margin-top: 4px;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
					.price-box{
						margin-top: 4px;
						.txt1{
							font-size: 10px;
							color: #FF5722;
						}
						.txt2{
							font-size: 16px;
							color: #FF5722;
						}
						.txt3{
							margin-left: 6px;
							font-size: 10px;
							color: #bbbbbb;
							text-decoration: line-through;
						}
					}
				}
				.goods-box:last-child{
					margin-right: 12px;
				}
				
			}
			
		}
	}
	.item-box:last-child{
		border-bottom: 0;
	}
}
.foot{
	position: relative;
	display: flex;
	justify-content: center;
	margin-top: 36px;
	margin-bottom: 50px;
	text{
		font-size: 14px;
		position: relative;
		z-index: 2;
		height: 20px;
		line-height: 20px;
		background-color: #f8f8f8;
		color: #cccccc;
		padding: 0 12px;
	}
}
.foot::before{
	content: "";
	z-index: 1;
	display: block;
	position: absolute;
	top: 50%;
	height: 0;
	width: 100%;
	transform: scaleY(0.5);
	border-bottom: 1px solid #E4E7ED;
}
.footzw{
	/* #ifdef H5*/
	height: 50px;
	/* #endif */
}

</style>
